<template>
  <div class="body">
    <div class="ChineseName">
      <span class="Name">住宅資料</span>
      <input placeholder="輸入樓層/單位" v-model="address1">
      <br>
      <div class="gray_top"></div>
      <span class="Name empty"></span>
      <input placeholder="輸入街道" v-model="address2">
      <br>
    </div>
    <div class="back"></div>
    <div class="ChineseName">
      <span class="Name">居住區域</span>
      <select class="sexua house" v-model="form.hk_area">
        <option value="中西區">中西區</option>
        <option value="東區">東區</option>
        <option value="南區">南區</option>
        <option value="灣仔區">灣仔區</option>
        <option value="九龍城區">九龍城區</option>
        <option value="觀塘區">觀塘區</option>
        <option value="深水埗區">深水埗區</option>
        <option value="黃大仙區 ">黃大仙區</option>
        <option value="油尖旺區">油尖旺區</option>
        <option value="離島區">離島區</option>
        <option value="葵青區 ">葵青區</option>
        <option value="北區">北區</option>
        <option value="西貢區">西貢區</option>
        <option value="沙田區">沙田區</option>
        <option value="大埔區">大埔區</option>
        <option value="荃灣區 ">荃灣區</option>
        <option value="屯門區">屯門區</option>
        <option value="元朗區">元朗區</option>
      </select>
      <span class="bar">|</span>
      <span class="Name">籍貫</span>
      <select class="sexua house" v-model="form.area">
        <option value="北京市">北京市</option>
        <option value="天津市">天津市</option>
        <option value="上海市">上海市</option>
        <option value="重慶市">重慶市</option>
        <option value="河北省">河北省</option>
        <option value="河南省">河南省</option>
        <option value="雲南省">雲南省</option>
        <option value="遼寧省">遼寧省</option>
        <option value="黑龍江省">黑龍江省</option>
        <option value="湖南省">湖南省</option>
        <option value="安徽省">安徽省</option>
        <option value="山東省">山東省</option>
        <option value="新疆維吾爾">新疆維吾爾</option>
        <option value="江蘇省">江蘇省</option>
        <option value="浙江省">浙江省</option>
        <option value="江西省">江西省</option>
        <option value="湖北省">湖北省</option>
        <option value="廣西壯族">廣西壯族</option>
        <option value="甘肅省">甘肅省</option>
        <option value="山西省">山西省</option>
        <option value="內蒙古">內蒙古</option>
        <option value="陜西省">陜西省</option>
        <option value="吉林省">吉林省</option>
        <option value="福建省">福建省</option>
        <option value="貴州省">貴州省</option>
        <option value="廣東省">廣東省</option>
        <option value="青海省">青海省</option>
        <option value="西藏">西藏</option>
        <option value="四川省">四川省</option>
        <option value="寧夏回族">寧夏回族</option>
        <option value="海南省">海南省</option>
        <option value="臺灣省">臺灣省</option>
        <option value="香港特別行政區">香港特別行政區</option>
        <option value="澳門特別行政區">澳門特別行政區</option>
      </select>
    </div>
    <div class="gray"></div>
    <div class="ChineseName">
      <span class="Name">公司名稱</span>
      <input placeholder="輸入公司名稱" v-model="form.company">
    </div>
    <div class="gray"></div>
    <div class="ChineseName">
      <span class="Name">公司職務</span>
      <input placeholder="輸入公司職務" v-model="form.vocation">
    </div>
    <div class="gray"></div>
    <div class="ChineseName">
      <span class="Name">備用電郵</span>
      <input placeholder="輸入備用電郵" v-model="form.ready_email">
    </div>
    <div class="gray"></div>
    <div class="ChineseName" id="al">
      <span class="Name">微信號</span>
      <input placeholder="輸入微信號" v-model="form.wxid">
    </div>

    <div class="gray"></div>
    <div class="ChineseName">
      <span class="Name">個人愛好</span>
      <input placeholder="輸入個人愛好" v-model="form.interest">
    </div>
    <div class="gray"></div>
    <div class="ChineseName">
      <span class="Name">個人特長</span>
      <input placeholder="輸入個人特長" v-model="form.speciality">
    </div>
    <div class="gray"></div>
    <div class="ChineseName" id="alignment">
      <span class="Name">學歷</span>
      <select class="sexua" v-model="form.education">
        <option value="初中">初中</option>
        <option value="高中">高中</option>
        <option value="專科">專科</option>
        <option value="本科">本科</option>
        <option value="碩士">碩士</option>
        <option value="博士">博士</option>
        <option value="博士後">博士後</option>
      </select>
    </div>
    <div class="gray"></div>
    <div class="ChineseName">
      <span class="Name">社會職務</span>
      <input placeholder="輸入社會職務" v-model="social_vocation1">
      <br>
      <div class="gray_top"></div>
      <span class="Name empty"></span>
      <input placeholder="輸入社會職務" v-model="social_vocation2">
      <div class="gray_top"></div>
      <span class="Name empty"></span>
      <input placeholder="輸入社會職務" v-model="social_vocation3">
    </div>
    <div class="gray"></div>
    <div class="ChineseName">
      <span class="Name">備註</span>
      <input placeholder="請按社團要求填寫其他信息" v-model="form.referrer">
    </div>
    <div class="butto">
      <button type="button" @click="submitInfo()">确定</button>
    </div>
  </div>
</template>

<script>
import { getInfoBySession, userUpdate, isLogin } from '@/api/login'
import { joinSociety } from '@/api/society'
export default {
  name: 'KnowYou',
  data () {
    return {
      address1: '',
      address2: '',
      social_vocation1: '',
      social_vocation2: '',
      social_vocation3: '',
      form: {
        education: '初中',
        company: '',
        vocation: '',
        ready_email: '',
        wxid: '',
        interest: '',
        speciality: '',
        area: '',
        hk_area: '',
        referrer: ''
      }
    }
  },
  created () {
    this.loadData()
    this.isLogin()
  },
  methods: {
    isLogin () {
      isLogin().then(res => {
        if (res.code === 0) {
          alert('请先登录')
          this.$router.push('/login')
        }
      })
    },
    loadData () {
      getInfoBySession().then(res => {
        if (res.code === 1) {
          this.form = res.data
          // console.log(this.form)
          var address = res.data.address
          var socialVocation = res.data.social_vocation
          console.log(socialVocation)
          this.address1 = address.split(',')[0]
          this.address2 = address.split(',')[1]
          this.social_vocation1 = socialVocation.split(',')[0]
          this.social_vocation2 = socialVocation.split(',')[1]
          this.social_vocation3 = socialVocation.split(',')[2]
        } else {
          alert(JSON.stringify(res))
        }
      }).catch(err => { console.log(err) })
    },
    submitInfo () {
      if (this.social_vocation2 === 'undefined' || this.social_vocation2 === undefined) {
        this.social_vocation2 = ''
      }
      if (this.social_vocation3 === 'undefined' || this.social_vocation3 === undefined) {
        this.social_vocation3 = ''
      }
      if (this.address2.length > 0) {
        this.form.address = this.address1 + ',' + this.address2
        this.form.social_vocation = (this.social_vocation1 ? this.social_vocation1 : '') + ',' + (this.social_vocation2 ? this.social_vocation2 : '') + ',' + (this.social_vocation3 ? this.social_vocation3 : '')
        userUpdate(this.form).then(res => {
          if (res.code === 1) {
            const sid = this.$route.query.sid
            if (sid) {
              this.joinSociety(sid)
            } else {
              alert('提交成功')
              this.$router.push('/member_center')
            }
          } else {
            alert(JSON.stringify(res))
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    joinSociety (sid) {
      joinSociety({sid: sid}).then(res => {
        alert(res.msg)
        this.$router.push('/member_center')
      }).catch(err => { console.log(err) })
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.body {
  background: rgb(250, 249, 247);
  font-family: PingFang SC;
}

.topbar {
  width: 100%;
  height: 44px;
  background: white;
}

.close {
  width: 15%;
  height: 100%;
  float: left;
  background-image: url(../style/img/close.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 30%;
}

.center {
  width: 70%;
  height: 100%;
  float: left;
  line-height: 54px;
  font-size: 17px;
  text-align: center;
  color: #000000;
  font-weight: 600;
}

.more {
  width: 15%;
  height: 100%;
  float: right;
  background-image: url(../style/img/more.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 30%;
}

.ChineseName {
  line-height: 50px;
  background: rgb(255, 255, 255);
}

.Name {
  margin-left: 16px;
  font-size: 15px;
}

.ChineseName input {
  margin-left: 12px;
  border: 0px;
  height: 21px;
  font-size: 15px;
  outline: none;
  width: 68%;
}

.gray {
  width: 100%;
  height: 1px;
  background: rgba(245, 245, 245, 1);
  opacity: 1;
}

#sexuality {
  width: 100px;
  margin-left: 40px;
  font-size: 17px;
  height: 21px;
}

.butto {
  width: 74.67%;
  margin: 32px auto auto auto;
  height: 44px;
  margin-bottom: 60px;
}

.butto button {
  color: rgba(255, 255, 255, 1);
  line-height: 22px;
  font-size: 16px;
  width: 100%;
  border: solid 1px rgba(249, 119, 130, 1);
  border-radius: 30px;
  height: 50px;
  background: rgb(249, 119, 130);
  background: linear-gradient(to right, rgba(240, 84, 73, 60%),rgba(240, 89, 67, 75%),rgba(237, 56, 99, 70%),rgba(238, 57, 98, 80%),rgba(237, 56, 99, 80%));
  /* background: rgba(249, 119, 130, 1); */
  box-shadow: 0px 3px 6px rgba(249, 119, 130, 0.4);
  border-radius: 54px;
  outline: none;
}

.empty {
  border: solid 1px rgb(255, 255, 255);
  line-height: 50px;
  margin-left: 75px;
}

.back {
  width: 100%;
  height: 8px;
  background: rgba(245, 245, 245, 1);
}

.gray_top {
  margin-left: 88px;
  margin-right: 4%;
  width: 75.53%;
  height: 1px;
  background: rgba(245, 245, 245, 1);
  opacity: 1;
}

#alignment input {
  margin-left: 43px;
}

#al input {
  margin-left: 28px;
}

.sexua {
  margin-left: 35px;
  background: rgb(255, 255, 255);
  border: none;
  font-size: 15px;
  height: 21px;
  outline: none;
  width: 60%;
  color: rgb(160, 160, 160);
}

.red {
  margin-left: 6px;
  color: red;
  width: 7px;
  height: 20px;
  font-size: 14px;
}

.house {
  width: 25% !important;
  margin-left: 3px;
}
</style>
